<template>
  <div>
    <Row :gutter="[13, 12]">
      <Col :span="12">
        <QueueStatsChart :chartData="queueChartData" :dateKey="dateKey" />
      </Col>
      <Col :span="12">
        <ProcessingChart :chartData="processingChartData" :dateKey="dateKey" />
      </Col>
      <Col :span="24">
        <Card title="异常">
          <ExceptionsTable :data="exceptionsTableData" />
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Card, Row, Col } from 'ant-design-vue';
  import QueueStatsChart from './QueueStatsChart.vue';
  import ProcessingChart from './ProcessingChart.vue';
  import ExceptionsTable from './ExceptionsTable.vue';

  const props = defineProps({
    chartData: {
      type: Object,
      required: true,
    },
    dateKey: {
      type: String,
      default: '',
    },
  });

  const queueChartData = ref<any[]>([]);
  const processingChartData = ref<any[]>([]);
  const exceptionsTableData = ref<any[]>([]);
  const dateKey = ref<string>('');
  watch(
    () => props.chartData,
    (nVal) => {
      queueChartData.value = [];
      processingChartData.value = [];
      exceptionsTableData.value = [];
      nVal.forEach((item) => {
        switch (item.cmdId) {
          case 13:
            queueChartData.value.push(item);
            break;
          case 14:
            processingChartData.value.push(item);
            break;
          case 15:
            exceptionsTableData.value.push(item);
            break;
        }
      });
    },
    {
      immediate: true,
      deep: true,
    },
  );

  watch(
    () => props.dateKey,
    (nVal) => {
      dateKey.value = nVal;
    },
    {
      immediate: true,
    },
  );
</script>
